<template>
  <div>
    <div style="background-color: paleturquoise;height: 170px">
      <el-row style="background-color: #f7f8fB;line-height: 40px;color: #999999;font-size: 16px">
        <el-col :span="2" :offset="3" ><i class="el-icon-s-home" style="font-size: 18px"></i>&nbsp;<span @click="shou">商城首页</span></el-col>
        <el-col :span="1" :offset="11">异议反馈</el-col>
        <el-col :span="1"><i class="el-icon-phone-outline">客户服务</i></el-col>
        <el-col :span="1">我的商城</el-col>
        <el-col :span="1">消息推送</el-col>
      </el-row>
      <el-row >
        <el-col :span="5" :offset="2" style="font-size: 40px;font-family: fangsong;margin-top: 36px;font-weight: 800">
          <span id="text">我的订单</span>
        </el-col>
        <el-col :span="4" :offset="3" style="margin-top: 30px">
          <el-input placeholder="请输入内容" style="width: 500px;" v-model="sou">
            <template slot="append">
              <el-button @click="chazhao" style="background-color: #3b99fc;color: white;border-radius: 0;width: 90px;font-size: 16px" >搜索</el-button>
            </template>
          </el-input>
          <br><br>
          <a style="color: #666666">德玛仕厨房设备</a>
          <a style="color: #666666;margin-left: 20px">全棉时代女工卫生用品</a>
        </el-col>
        <el-col :span="4" :offset="2">
          <el-button style="background-color: #f7f8fb;border-radius: 20px;margin-top: 35px;width: 150px;height: 45px" @click="gouwu">我的购物车
            <el-badge :value="numberAll" class="item"></el-badge></el-button>
        </el-col>
      </el-row>
    </div>
    <div style="background-color: #f6f6f6">
      <div style="background-color: white;width: 70%;margin-top: 50px;display: inline-block;margin-bottom: 50px" >
          <el-row style="font-size: 20px;line-height: 80px;font-weight: 700">
            <el-col :span="2" v-if="!back"><span @click="findA">全部订单</span></el-col>
            <el-col :span="2" style="background-color: #afeeee" v-if="back"><span @click="findA">全部订单</span></el-col>
            <el-col :span="2" v-if="back1"><span @click="findZero">待付款</span></el-col>
            <el-col :span="2" style="background-color: #afeeee"><span @click="findZero" v-if="!back1">待付款</span></el-col>
            <el-col :span="2" v-if="back2"><span @click="findOne">待收货</span></el-col>
            <el-col :span="2" style="background-color: #afeeee"><span @click="findOne" v-if="!back2">待收货</span></el-col>
            <el-col :span="2" v-if="back3"><span @click="findTwo">已取消</span></el-col>
            <el-col :span="2" style="background-color: #afeeee"><span @click="findTwo" v-if="!back3">已取消</span></el-col>
          </el-row>
        <el-row style="background-color: #f6f6f6;margin-left: 30px;line-height: 50px;font-size: 18px;font-weight: 600;width: 96%">
          <el-col :span="5">订单编号</el-col>
          <el-col :span="3">订单名称</el-col>
          <el-col :span="3">订单总价</el-col>
          <el-col :span="3">下单时间</el-col>
          <el-col :span="3">收货地址</el-col>
          <el-col :span="3">订单状态</el-col>
          <el-col :span="4">操作</el-col>
        </el-row>
        <el-empty description="还没有订单哦,快去下单吧" v-if="gorderList.length==0">
          <el-button style="margin-top: 50px;background-color: #5199FD;color: white;border-radius: 15px" @click="liulan">浏览商品</el-button>
        </el-empty>
        <el-row v-for="(order,index) in gorderList" :key="index" style="height: 122px;border: 3px solid #d6c9c9;margin-top: 20px;width: 96%;margin-bottom: 30px;margin-left: 30px;line-height: 120px;font-size: 18px">
          <el-col :span="5" style="font-size: 18px;line-height:20px;word-wrap: break-word;width: 280px;word-break: break-all;height: 50px;
          margin-top: 40px;padding-left: 30px;padding-right: 30px"><span @click="TiaoItem(order.gorderId)">{{order.gorderId}}</span></el-col>
          <el-col :span="3" style="border-left:3px solid #d6c9c9">{{order.gorderName}}</el-col>
          <el-col :span="3" style="color: red;border-left:3px solid #d6c9c9;font-size: 20px;font-weight: 600">￥{{order.gorderPrice}}.00</el-col>
          <el-col :span="3" style="font-size: 18px;border-left:3px solid #d6c9c9">{{order.gorderTime | formatDate}}</el-col>
          <el-col :span="3" style="border-left:3px solid #d6c9c9">{{order.gorderAddr}}</el-col>
          <el-col :span="3" style="border-left:3px solid #d6c9c9;font-weight: 600" v-if="order.gorderFlag==0">待付款
            <span id="d" class="time">{{countDown}}</span></el-col>
          <el-col :span="3" style="border-left:3px solid #d6c9c9;font-weight: 600" v-if="order.gorderFlag==1">待收货</el-col>
          <el-col :span="3" style="border-left:3px solid #d6c9c9;font-weight: 600" v-if="order.gorderFlag==2">已取消</el-col>
          <el-col :span="4" style="border-left:3px solid #d6c9c9">
            <el-button style="background-color: #5199FD;color: white;border-radius: 15px" v-if="order.gorderFlag==0" @click="pay(order.gorderId,order.gorderPrice)">去支付</el-button>
            <el-button style="background-color: red;color: white;border-radius: 15px" v-if="order.gorderFlag==0" @click="qu(order.gorderId)">取消订单</el-button>
            <el-button style="background-color: #5199FD;color: white;border-radius: 15px" v-if="order.gorderFlag==1" @click="TiaoItem(order.gorderId)">查看</el-button>
            <el-button style="background-color: red;color: white;border-radius: 15px" v-if="order.gorderFlag==1" @click="qu(order.gorderId)">取消订单</el-button>
            <el-button style="background-color: red;color: white;border-radius: 15px" v-if="order.gorderFlag==2" @click="shan(order.gorderId)">删除订单信息</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "goodsOrder",
  data(){
    return{
      sou:'',
      gorderList:{},
      gorderListZ:{},
      numberAll:0,
      countDownTime: 60,  //设置默认时间,(单位秒)
      timer: null,
      back:true,
      back1:true,
      back2:true,
      back3:true,
    }
  },
  created() {
    //初始化时读取sessionStorage中储存的数据,有就设置为countDownTime,没有就根据自己逻辑设置countDownTime
    if (window.sessionStorage.getItem("exam_time") == null) {
      this.startCountDown();
    } else {
      this.countDownTime = Number(window.sessionStorage.getItem("exam_time"));
      this.startCountDown();
    }
  },
  computed: {
    // 计算属性自动计算countDownTime,并转换为倒计时
    countDown() {
      const minutes = Math.floor(this.countDownTime / 60);
      const seconds = this.countDownTime % 60;
      const m = minutes < 10 ? "0" + minutes : minutes;
      const s = seconds < 10 ? "0" + seconds : seconds;
      return `${m}:${s}`;
    },
  },
  methods:{
    findAll(){
      this.$axios.get('gorder/findAll').then(res=>{
        this.gorderList = res.data.data
        this.gorderListZ = res.data.data
        for (let i = 0; i <this.gorderList.length; i++) {
          if (this.gorderList[i].gorderFlag == 0){
            localStorage.setItem("id",this.gorderList[i].gorderId)
          }
        }
        console.log(res.data.data)
      })
    },
    chazhao(){
      if (this.sou==''){
        return
      }
      this.$axios.get('/goods/selectLike',{params:{src:this.sou}}).then(res=>{
        this.$router.push({path:'/goodsList',query: {data:res.data.data}})
      })
    },
    qu(id){
      this.$axios.get('gorder/moveById',{params:{gorderId:id}}).then(res=>{
        // location.reload()
        this.findAll()
      })
    },
    startCountDown() {
      this.timer = setInterval(() => {
        if (this.countDownTime <= 0) {
          //当监测到countDownTime为0时,清除计数器并且移除sessionStorage
          clearInterval(this.timer);
          this.timer= null
          sessionStorage.removeItem("exam_time");
          this.qu(localStorage.getItem('id'))
        } else if (this.countDownTime > 0) {
          //每秒让countDownTime -1秒,并设置到sessionStorage中
          this.countDownTime--;
          window.sessionStorage.setItem("exam_time", this.countDownTime);
        }
      }, 1000);
    },
    shan(id){
      this.$axios.get('gorder/deleteById',{params:{gorderId:id}}).then(res=>{
        location.reload()
      })
    },
    quanju(){
      this.$axios.get('/cart/findAllByUid').then(res=>{
        this.numberAll = res.data.data.length
      })
    },
    findA(){
        this.back = true;
        this.back1 = true;
        this.back2 = true;
        this.back3 = true;
        this.gorderList = this.gorderListZ
    },
    findZero(){
      this.$axios.get('gorder/findAllByFlagZero').then(res=>{
        this.back = false;
        this.back1 = false;
        this.back2 = true;
        this.back3 = true;
        this.gorderList = {}
        this.gorderList = res.data.data
      })
    },
    findOne(){
      this.$axios.get('gorder/findAllByFlagOne').then(res=>{
        this.back = false;
        this.back1 = true;
        this.back2 = false;
        this.back3 = true;
        this.gorderList = {}
        this.gorderList = res.data.data
      })
    },
    findTwo(){
      this.$axios.get('gorder/findAllByFlagTwo').then(res=>{
        this.back = false;
        this.back1 = true;
        this.back2 = true;
        this.back3 = false;
        this.gorderList = {}
        this.gorderList = res.data.data
      })
    },
    liulan(){
      this.$router.push('/goods')
    },
    gouwu(){
      this.$router.push('/goodsCart')
    },
    pay(id,price){
      this.$axios.post('/gorder/hotelordertopay',{gorderId:id,gorderPrice:price}).then(res=>{
        this.$router.push({path:'/pay',query:{url:res.data.data}})
      })
    },
    shou(){
      this.$router.push('/goods')
    },
    TiaoItem(id){
      this.$router.push({path:'/goodsOrderItem',query:{gorderId:id}})
    }
  },
  mounted() {
      this.findAll()
      this.quanju()
  },
  filters: {
    formatDate: function (value) {
      if (value) {
        const date = new Date(value);
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 补零操作
        const day = date.getDate().toString().padStart(2, '0'); // 补零操作
        return `${year}-${month}-${day}`;
      }
    },
  }
}
</script>

<style scoped>

</style>
